<template>

    <el-container>
        <!--  头部  -->
        <el-header class="homeHeader">
            <div>
                <i class="title"><img src="../assets/logo.png" alt="Swagger" class="logo"></i>
            </div>
            <div>
                <i class="title">SwaggerAPI</i>
            </div>
            <div>
                <el-button icon="el-icon-bell" type="text" style="margin-right: 8px;color: #000000;" size="normal" v-if="false"
                           @click="goChat"></el-button>
                <el-dropdown class="userInfo" @command="commandHandler">
                    <span class="el-dropdown-link">
                      {{user.name}}<i><img :src="user.avatar" alt=""></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="userinfo" v-if="false">个人中心</el-dropdown-item>
                        <!--<el-dropdown-item command="setting">设置</el-dropdown-item>-->
                        <el-dropdown-item command="modifyPwd">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout" divided>注销登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>

        <!--  修改密码对话框  -->
        <div>
            <el-dialog
                    title="修改密码"
                    :visible.sync="modifyPwdDialogVisible"
                    close-on-press-escape="false"
                    width="20%"
                    top="25vh">

                <el-form :model="modifyPwdForm" :rules="rules" ref="ruleForm" label-width="130px"
                         label-position="left" class="demo-ruleForm">
                    <el-form-item label="原密码" prop="oldPwd">
                        <el-input v-model="modifyPwdForm.oldPwd" type="password" maxlength="64"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd">
                        <el-input v-model="modifyPwdForm.newPwd" type="password" maxlength="64"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPwd">
                        <el-input v-model="modifyPwdForm.confirmPwd" type="password" maxlength="64"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="reset">重置</el-button>
                  <el-button type="primary" @click="saveCancel">取消</el-button>
                  <el-button type="primary" @click="save">确定</el-button>
                </span>
            </el-dialog>
        </div>

        <!--  侧边菜单栏和主体部分  -->
        <el-container>
            <!--   侧边栏   -->
            <el-aside class="elAside">
                <el-menu router unique-opened :default-openeds="['0']">
                    <el-submenu :index="index+''" v-for="(item,index) in routes" v-if="!item.hidden" :key="index">
                        <template slot="title">
                            <!--<i style="color: #409eff;margin-right: 5px" :class="item.iconCls"></i>-->
                            <i style="color: blueviolet; margin-right: 5px" :class="item.iconCls"></i>
                            <span>{{item.name}}</span>
                        </template>
                        <el-menu-item :index="child.path" v-for="(child,indexj) in item.children" :key="indexj">
                            {{child.name}}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right"
                                   v-if="this.$router.currentRoute.path!=='/home'">
                        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <div class="homeWelcome" v-if="this.$router.currentRoute.path==='/home'">
                        <div>
                            SwaggerAPI聚合服务！
                        </div>
                    </div>
                    <router-view class="homeRouterView"/>
                </el-main>
            </el-container>
        </el-container>
    </el-container>

</template>

<script>
    import CryptoJS from "crypto-js";
    import {Message} from "element-ui";

    export default {
        name: "Home",

        data() {

            let validConfirmPwd = (rule, value, callback) => {
                if (!value || value === '') {
                    callback(new Error('请输入确认密码'))
                } else if (value !== this.modifyPwdForm.newPwd) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }

            return {
                // user: JSON.parse(window.localStorage.getItem("user"))
                content: '',

                modifyPwdDialogVisible: false,

                modifyPwdForm: {
                    oldPwd: '',
                    newPwd: '',
                    confirmPwd: '',
                },
                rules: {
                    oldPwd: [
                        {required: true, message: '请输入原密码', trigger: 'blur'},
                        {min: 1, max: 16, message: '长度在 1 到 64 个字符', trigger: 'blur'}
                    ],
                    newPwd: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min: 1, max: 16, message: '长度在 1 到 64 个字符', trigger: 'blur'}
                    ],
                    confirmPwd: [
                        {required: true, validator: validConfirmPwd, trigger: 'blur'},
                        {min: 1, max: 16, message: '长度在 1 到 64 个字符', trigger: 'blur'},
                    ],
                },
            }
        },
        computed: {
            routes() {
                return this.$store.state.routes;
            },
            user() {
                return this.$store.state.currentUser;
            }
        },
        methods: {
            goChat() {
                this.$router.push("/chat");
            },
            commandHandler(cmd) {
                if (cmd === 'logout') {
                    this.$confirm('此操作将注销登录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.getRequest("/logout");
                        window.localStorage.removeItem("user")
                        this.$store.commit('initRoutes', []);
                        this.$router.replace("/");
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                } else if (cmd === 'userinfo') {
                    this.$router.push('/hrinfo');
                } else if (cmd === 'modifyPwd') {
                    this.modifyPwdForm = {}
                    this.modifyPwdDialogVisible = true;
                }
            },

            reset() {
                this.modifyPwdForm = {}
                Message.success("重置成功");
            },
            saveCancel: function () {
                this.modifyPwdDialogVisible = false;
                this.modifyPwdForm = {}
            },
            save() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.postRequest('/sysUser/modifyPwd', this.modifyPwdForm).then((resp => {
                            if (resp && resp.status === 200 && resp.data === 1) {
                                this.modifyPwdDialogVisible = false;
                                Message.success("修改密码成功");
                            } else {
                                Message.error("原密码不正确");
                            }
                        }));
                    } else {
                        return false;
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .homeRouterView {
        margin-top: 50px;
        height: 90%;
    }

    .homeWelcome {
        text-align: center;
        font-size: 30px;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        color: #409eff;
        padding-top: 50px;
    }

    .homeHeader {
        background-color: #409eff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        box-sizing: border-box;
    }

    .homeHeader .title {
        font-size: 30px;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        color: #ffffff;
        padding: 0;
    }

    .homeHeader .logo {
        width: 64px;
        height: 64px;
        padding-left: 0;
        padding-top: 9px;
    }

    .homeHeader .userInfo {
        cursor: pointer;
    }

    .elAside {
        width: 200px;
        height: 100%;
        background-color: black;
    }

    .el-dropdown-link img {
        width: 48px;
        height: 48px;
        border-radius: 24px;
        margin-left: 8px;
    }

    .el-dropdown-link {
        display: flex;
        align-items: center;
    }
</style>
